<template>
    <div class="team-content">
        <div class="team-header">
            <h4>该代理团队返佣比例</h4>
            <el-button @click="handleBack">
                返回
            </el-button>
        </div>
       <div class="team-table">
            <Table
                :data="[agentInfo]"
                :columns="columns"
            />
       </div>
    </div>
</template>

<script>
import Table from '@/components/Table'
import { commissionRender } from '../../utils'

export default {
	name: 'OwnPointList',
	components: {
		Table
	},
    props: {
        agentInfo: {
            type: Object,
            default: {}
        },
        commissionsShow: {
            type: Function,
            default: () => {}
        }
    },
    data() {
        const header = (label, tips) => {
            return <div class='header'>
                        {label}
                        <p>团队返佣</p>
                        {tips && (
                            <el-tooltip content={`${label}团队返佣：${tips}`} placement='top-start' effect='dark'>
                                <i class='el-icon-question' />
                            </el-tooltip>
                        )}
				</div>
        }
        return {
            columns: [
                {
                    label: '代理账号',
                    prop: 'userName'
                },
                {
                    header: () => header('德州-俱乐部', this.$t('agent.texasCommission_tips')),
                    customRender: ({ row }) => {
                        const {minTexasCommission, maxTexasCommission} = row
                        return commissionRender(minTexasCommission, maxTexasCommission)
                    }
                },
                {
                        header: () => header('德州-保险', this.$t('agent.texasInsuranceCommission_tips')),
                        customRender: ({ row }) => {
                            const {minTexasInsuranceCommission, maxTexasInsuranceCommission} = row
                            return commissionRender(minTexasInsuranceCommission, maxTexasInsuranceCommission)
                        }
                    },
                    {
                        header: () => header('其他场馆'),
                        customRender: ({ row }) => {
                            const {minOtherCommission, maxOtherCommission} = row
                            return commissionRender(minOtherCommission, maxOtherCommission)
                        }
                    },
                    {
                        label: '操作',
                        customRender: ({ row }) => {
                            return <el-link style='color: #66b1ff' onClick={() => this.commissionsShow(row)}> 返佣比例详情 </el-link>
                        }
                    }
                ],
            data: []
        }
    },
    watch: {
        // agentInfo: {
        //     immediate: true,
		// 	deep: true,
        //     handler(val) {
        //         this.loadData()
		// 	}
        // }
	},
    created() {
	},
    methods: {
        // 处理api
		async loadData() {
            try {
                const ret = await this.$api.rebateRateQuery({
                    userName: this.agentInfo.userName,
                    userId: this.agentInfo.userId,
                    userType: this.agentInfo.userType
                })
                if (ret.code === 200) {
                    this.data = ret?.data
                }
            } catch (err) {
                console.log(err)
            }
        },
        handleBack() {
            this.$emit('back')
        }
    }
}
</script>
<style scoped lang="scss">
    .team-header{
        display: flex;
        margin-bottom: 10px;
        align-items: flex-end;
        h4 {
            font-weight: 400;
            font-size: 16px;
            margin: 0;
            flex: 1;
        }
    }
.team-table{
    margin-bottom:  20px;
    width: 920px;
}

.header{
	position: relative;

	.el-icon-question{
		position: absolute;
		font-size: 12px;
		top: 25px;
		right: 5px;
		cursor: pointer;
		&:after{
			font-size: 17px;
		}
	}
}
</style>
